<template>
	<view class="container">
		<uni-card :is-shadow="true" is-full>
			<text class="uni-h6">密码为8至12位，包含数字，小写字母</text>
		</uni-card>
		<uni-section title="修改密码" type="line">
			<view class="card">
				<uni-forms ref="form" :modelValue="pwdData" :rules="rules" label-width="90px">
					<uni-forms-item label="新密码" name="newPwd" required>
						<uni-easyinput v-model="pwdData.newPwd" placeholder="请输入新密码" trim="all"
							type="password"></uni-easyinput>
					</uni-forms-item>
					<uni-forms-item label="再次输入新密码" name="newPwdT" required>
						<uni-easyinput v-model="pwdData.newPwdT" placeholder="请再次输入新密码,确保两次密码一致" trim="all"
							type="password"></uni-easyinput>
					</uni-forms-item>
				</uni-forms>
			</view>
			<text class="forgetPwd"
				@click="navigateTo('/pages/forgetPwd/forgetPwd')">忘记密码?</text>
			<view class="button-group">
				<button type="primary" size="mini" @click="confirm">确认</button>
				<button type="warn" size="mini" @click="cancel">取消</button>
			</view>
		</uni-section>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'
	import {
		onShow,
		onLoad,
	} from '@dcloudio/uni-app';
	import {
		changePwdRequest,userInfo
	} from '@/common/js/api';
	import {
		navigateBack,
		navigateTo
	} from '../../common/js/common';

	// 表单校验规则
	const rules = ref({
		newPwd: {
			rules: [{
					required: true,
					errorMessage: '密码不能为空',

				},
				{
					pattern: '^(?=.*[a-z])(?=.*\\d)[a-z\\d]{8,12}$',
					errorMessage: '密码格式错误',
				}
			]
		},
		newPwdT: {
			rules: [{
					required: true,
					errorMessage: '密码不能为空'
				},
				{
					pattern: '^(?=.*[a-z])(?=.*\\d)[a-z\\d]{8,12}$',
					errorMessage: '密码格式错误',
				},
				{
					validateFunction: function(rule, value, data, callback) {
						if (value != data.newPwd) {
							callback('两次输入的密码不一致');
						}
						return true;
					}
				}
			]
		},
	});

	// 表单dom
	const form = ref(null);

	const pwdData = ref({
		newPwd: '',
		newPwdT: ''
	});

	function confirm() {
		form.value.validate().then(res => {
			changePwdRequest(pwdData.value.newPwd);
			uni.showToast({
				icon:'success',
				title:'修改成功'
			});
			navigateBack();
		}).catch(err => {
			console.log('err', err);
		});
	}
</script>

<style scoped>
	.container {
		padding: 10px;
	}

	.forgetPwd {
		text-decoration: underline;
	}

	.button-group {
		margin-top: 15px;
		display: flex;
		justify-content: space-around;
	}
</style>